<template>
  <div>
       <el-form ref="searchForm"  :inline="true" :model="searchMap" style="margin-top: 20px;" >
    <!--有prop才可以重置-->
    <el-form-item prop="name">
     <el-input v-model="searchMap.name" placeholder="供应商名称" style="width: 200px;"></el-input> 
    </el-form-item>

    <el-form-item prop="linkman" v-if="!isDialog">
     <el-input v-model="searchMap.linkman" placeholder="联系人" style="width: 200px;"></el-input>
    </el-form-item>

    <el-form-item prop="mobile" v-if="!isDialog">
     <el-input v-model="searchMap.mobile" placeholder="联系电话" style="width: 200px;"></el-input>
    </el-form-item>
    

    <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
        <el-button v-if="!isDialog" type="success" @click="resetForm('searchForm')">重置</el-button>
        <el-button v-if="!isDialog" type="warning" icon="el-icon-save" @click="handleAdd">新增</el-button>
    </el-form-item>
</el-form>
<!--列表-->
  <el-table :data="list" height="380" border style="width: 100%" :highlight-current-row="isDialog" @current-change="clickCurrentChange">
  <el-table-column type="index" label="序号" width="60"></el-table-column>
  <el-table-column prop="name" label="供应商名称"></el-table-column>
  <el-table-column prop="linkman" label="联系人" width="120"></el-table-column>
  <el-table-column v-if="!isDialog" prop="mobile" label="联系电话"></el-table-column>
  <el-table-column v-if="!isDialog" prop="remark" label="备注"></el-table-column>
  <el-table-column v-if="!isDialog" label="操作" width="150">
  <template slot-scope="scope">
  <el-button v-if="!isDialog" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
  <el-button v-if="!isDialog" size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button></template>
  </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5,10,20,50]"
    :page-size="pageSize"
    :layout="isDialog ? 'prev,pager,next':'total,sizes,prev,pager,next,jumper'" 
    :total="total">
</el-pagination>

<!-- 添加或者修改 -->
  <el-dialog  :title="supplier.id==null ? '添加供应商':'修改供应商'" :visible.sync="dialogFormVisible">
				      <el-form status-icon :model="supplier" label-width="100px" :rules="rules" ref="ruleForm">

				          
                           <el-form-item label="供应商名称" prop="name">
                                <el-input v-model="supplier.name" /> 
                            </el-form-item>

                           
                            <el-form-item label="联系人" prop="linkman">
                                <el-input v-model="supplier.linkman" /> 
                            </el-form-item> 
                                   
                            <el-form-item label="联系电话" prop="mobile">
                                <el-input v-model="supplier.mobile" />
                            </el-form-item>
                           

                            <el-form-item label="备注">
                                <el-input v-model="supplier.remark" type="textarea"
                                :autosize="{minRows: 2,maxRows: 4}" placeholder="备注" />
                            </el-form-item>

				      </el-form>

                        <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible=false">取消</el-button>
                                <el-button type="primary" @click="addSupplier('ruleForm')">{{supplier.id==null ? '添加':'修改'}}</el-button>
                        </div>
				  </el-dialog>
</div>
</template>

<script>
import supplierApi from '@/api/supplier'
export default {
  props:["isDialog","optinonSupplie"],
  data () {
    return {
      list:[],
        total:0,
        currentPage: 1,//当前页,默认第1页
        pageSize: 10,//每页显示条数，10条
        //条件查询绑定条件
        searchMap: {
                cardNum:'',     
                name:'',
                payType:'',
                birthday:''
            },
        dialogFormVisible:false,
        supplier:{
          name:'',
          linkman:'',
          mobile:'',
          remark:''
        },
          rules:{
            linkman: [{required: true,message: '联系人不能为空',trigger: 'blur'}],
            name: [{required: true,message: '供应商不能为空',trigger: 'blur'}],
        }

    }
  },
   created(){
        this.fetchData()
  },

  components: {},

  methods: {
    fetchData(){
          supplierApi.search(this.currentPage,this.pageSize,this.searchMap).then(response =>{
              const reqs = response.data
              this.total = reqs.total
              this.list = reqs.records
          })
      },
       handleSizeChange(val){
            this.pageSize = val
            this.fetchData()
      },
      handleCurrentChange(val){
            this.currentPage = val
            this.fetchData()
      },
       xuhao(index){
	   	return (this.currentPage-1)*this.pageSize+index+1;
	   },
      handleEdit(id){
          this.handleAdd()
          supplierApi.getById(id).then(response=>{
                if(response.code == 2000){
                    this.supplier = response.data 
                }
          })
      },
      handleDelete(id){
          this.$confirm('确认删除这条记录吗, 是否继续?', '提示', {
					 		confirmButtonText: '确定',
					 		cancelButtonText: '取消',
					 		type: 'warning'
                }).then(()=>{
                   supplierApi.deleteById(id).then(response=>{
                       if(response.code==2000){
                        this.fetchData()
                        }
                      })
                   }) 
      },
      resetForm(formName){
             this.$refs[formName].resetFields();
      },
      addSupplier(formName){
          this.$refs[formName].validate(valid=>{
                    if(valid){
                      supplierApi.add(this.supplier).then(response => {
                          const resp = response.data
                          if(response.code == 2000){
                            this.currentPage = 1;
                            this.fetchData()
                            this.dialogFormVisible = false;
                          }else{
                              this.$message({
                                  message: resp.message,
                                  type: 'warning'
                              });
                          }
                      })
                      }else{
                      //验证不通过
                      return false;
                    }
                  })
      },

        handleAdd(){
       this.dialogFormVisible = true;
       this.chongzhi();
       this.$nextTick(()=>{
        //this.$nextTick()它是一个异步事件，当渲染结束之后，它的回调函数才会被执行
        //弹出窗口打开之后，需要加载Dom,就需要花费一点时间，我们就应该等待它加载完dom之后，再进行调用resetFields方法，重置表单和清除样式
       this.$refs['ruleForm'].resetFields()
      })
    },
     chongzhi(){
        this.supplier={
          name:'',
          linkman:'',
          mobile:'',
          remark:''
        }
    },
    clickCurrentChange(currentRow){
      this.optinonSupplie(currentRow); 
    }
  }
}
</script>

<style scoped>
</style>